<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com https://v3.alapi.cn https://www.alapi.cn 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://v3.alapi.cn https://www.alapi.cn; frame-src https://www.alapi.cn;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>工作日查询</title>
        <style>
            .workday-container {
                max-width: 900px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fff;
                min-height: calc(100vh - 100px);
            }
            .nav {
                background-color: #2c3e50;
                padding: 15px;
                text-align: center;
                margin-bottom: 20px;
            }
            .nav a {
                color: #fff;
                text-decoration: none;
                margin: 0 15px;
                font-size: 16px;
                padding: 8px 15px;
                border-radius: 4px;
                transition: background-color 0.3s;
                display: inline-block;
            }
            .nav a:hover, .nav a.active {
                background-color: #34495e;
            }
            .workday-header {
                text-align: center;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid #3498db;
            }
            .workday-header h1 {
                color: #2c3e50;
                font-size: 2.5em;
                margin-bottom: 10px;
            }
            .workday-header p {
                color: #7f8c8d;
                font-size: 1.1em;
            }
            .form-container {
                background-color: #f8f9fa;
                padding: 25px;
                border-radius: 8px;
                margin-bottom: 30px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #2c3e50;
                font-weight: bold;
                font-size: 14px;
            }
            .label-with-help {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .help-btn {
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 12px;
                font-size: 12px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            .help-btn:hover {
                background-color: #2980b9;
            }
            .form-group input,
            .form-group select {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                box-sizing: border-box;
                transition: border-color 0.3s;
                font-family: inherit;
            }
            .form-group input:focus,
            .form-group select:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }
            .form-row {
                display: flex;
                gap: 15px;
            }
            .form-row .form-group {
                flex: 1;
            }
            .checkbox-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .checkbox-group input[type="checkbox"] {
                width: auto;
                margin: 0;
            }
            .submit-btn {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
                margin-top: 10px;
            }
            .submit-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            .submit-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
            .result-container {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                padding: 30px;
                border-radius: 8px;
                margin-top: 20px;
                display: none;
            }
            .result-container.show {
                display: block;
            }
            .result-title {
                font-size: 1.5em;
                color: #2c3e50;
                margin-bottom: 20px;
                text-align: center;
                font-weight: bold;
            }
            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;
                margin-bottom: 30px;
            }
            .stat-card {
                background-color: white;
                padding: 20px;
                border-radius: 8px;
                text-align: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .stat-card.workday {
                border-top: 4px solid #27ae60;
            }
            .stat-card.weekend {
                border-top: 4px solid #3498db;
            }
            .stat-card.holiday {
                border-top: 4px solid #e74c3c;
            }
            .stat-card.buban {
                border-top: 4px solid #f39c12;
            }
            .stat-card.total {
                border-top: 4px solid #9b59b6;
            }
            .stat-value {
                font-size: 2em;
                font-weight: bold;
                color: #2c3e50;
                margin-bottom: 5px;
            }
            .stat-label {
                font-size: 14px;
                color: #7f8c8d;
            }
            .dates-list {
                background-color: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .dates-list-title {
                font-size: 1.2em;
                color: #2c3e50;
                margin-bottom: 15px;
                font-weight: bold;
            }
            .dates-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 10px;
            }
            .date-item {
                padding: 10px;
                border-radius: 6px;
                text-align: center;
                font-size: 14px;
                transition: transform 0.2s;
            }
            .date-item:hover {
                transform: scale(1.05);
            }
            .date-item.workday {
                background-color: #d5f4e6;
                color: #27ae60;
                border: 1px solid #27ae60;
            }
            .date-item.weekend {
                background-color: #d6eaf8;
                color: #3498db;
                border: 1px solid #3498db;
            }
            .date-item.holiday {
                background-color: #fadbd8;
                color: #e74c3c;
                border: 1px solid #e74c3c;
            }
            .date-item.buban {
                background-color: #fdeaa7;
                color: #f39c12;
                border: 1px solid #f39c12;
            }
            .date-text {
                font-weight: bold;
                margin-bottom: 5px;
            }
            .date-type {
                font-size: 12px;
            }
            .error-message {
                background-color: #fee;
                color: #c00;
                padding: 15px;
                border-radius: 6px;
                border-left: 4px solid #f00;
                margin-top: 20px;
                display: none;
            }
            .error-message.show {
                display: block;
            }
            .loading {
                text-align: center;
                padding: 20px;
                color: #666;
                display: none;
            }
            .loading.show {
                display: block;
            }
            .loading::after {
                content: '...';
                animation: dots 1.5s steps(4, end) infinite;
            }
            @keyframes dots {
                0%, 20% { content: '.'; }
                40% { content: '..'; }
                60%, 100% { content: '...'; }
            }
            .modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .modal-overlay.show {
                display: flex;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                display: flex;
                flex-direction: column;
            }
            .modal-header {
                padding: 20px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .modal-header h2 {
                margin: 0;
                color: #2c3e50;
                font-size: 1.5em;
            }
            .modal-close {
                background: none;
                border: none;
                font-size: 24px;
                color: #999;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: background-color 0.3s;
            }
            .modal-close:hover {
                background-color: #f0f0f0;
                color: #333;
            }
            .modal-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
            }
            .modal-body iframe {
                width: 100%;
                height: 500px;
                border: none;
                border-radius: 4px;
            }
            .modal-footer {
                padding: 15px 20px;
                border-top: 1px solid #eee;
                text-align: center;
                background-color: #f8f9fa;
            }
            .modal-footer a {
                color: #3498db;
                text-decoration: none;
                font-weight: bold;
            }
            .modal-footer a:hover {
                text-decoration: underline;
            }
            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                }
                .workday-header h1 {
                    font-size: 2em;
                }
                .nav a {
                    display: block;
                    margin: 5px 0;
                }
                .stats-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .dates-grid {
                    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                }
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="poem.html">藏头诗</a>
            <a href="translate.html">翻译</a>
            <a href="express.html">快递查询</a>
            <a href="ip.html">IP查询</a>
            <a href="workday.html" class="active">工作日查询</a>
            <a href="network.html">网络状态</a>
            <a href="vibrate.html">震动功能</a>
            <a href="battery.html">电池状态</a>
        </div>
        <div class="workday-container">
            <div class="workday-header">
                <h1>工作日查询</h1>
                <p>查询指定日期范围内的工作日、周末、节假日和补班情况</p>
            </div>

            <div class="form-container">
                <form id="workday-form">
                    <div class="form-group">
                        <label for="token" class="label-with-help">
                            <span>API Token *</span>
                            <button type="button" class="help-btn" onclick="openTokenModal()">获取 Token</button>
                        </label>
                        <input type="text" id="token" name="token" placeholder="请输入API Token" required>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="start">开始日期 *</label>
                            <input type="date" id="start" name="start" required>
                        </div>

                        <div class="form-group">
                            <label for="end">结束日期</label>
                            <input type="date" id="end" name="end">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox-group">
                            <input type="checkbox" id="need" name="need" value="1">
                            <label for="need" style="margin: 0; font-weight: normal;">显示详细日期列表</label>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" id="submit-btn">查询</button>
                </form>

                <div class="loading" id="loading">正在查询</div>
                <div class="error-message" id="error-message"></div>
            </div>

            <div class="result-container" id="result-container">
                <div class="result-title">查询结果</div>
                
                <div class="stats-grid" id="stats-grid">
                    <!-- 统计数据将通过 JavaScript 动态生成 -->
                </div>

                <div class="dates-list" id="dates-list" style="display: none;">
                    <div class="dates-list-title">详细日期列表</div>
                    <div class="dates-grid" id="dates-grid">
                        <!-- 日期列表将通过 JavaScript 动态生成 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Token 获取弹窗 -->
        <div class="modal-overlay" id="token-modal" onclick="closeTokenModal(event)">
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h2>获取 API Token</h2>
                    <button class="modal-close" onclick="closeTokenModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <p style="margin-bottom: 15px; color: #666;">
                        请在下方页面注册并获取您的 API Token，然后将 Token 复制到输入框中。
                    </p>
                    <iframe src="https://www.alapi.cn/aff/nutpi" id="token-iframe"></iframe>
                </div>
                <div class="modal-footer">
                    <p style="margin: 0; color: #666;">
                        如果页面无法加载，请
                        <a href="https://www.alapi.cn/aff/nutpi" target="_blank">点击这里在新窗口打开</a>
                    </p>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/utils.js"></script>
        <script src="js/workday.js"></script>
        <script>
            // 打开 Token 获取弹窗
            function openTokenModal() {
                document.getElementById('token-modal').classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            // 关闭 Token 获取弹窗
            function closeTokenModal(event) {
                if (event && event.target !== event.currentTarget) {
                    return;
                }
                document.getElementById('token-modal').classList.remove('show');
                document.body.style.overflow = '';
            }

            // ESC 键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const modal = document.getElementById('token-modal');
                    if (modal.classList.contains('show')) {
                        closeTokenModal();
                    }
                }
            });

            // 设置默认日期（当前月份）
            document.addEventListener('DOMContentLoaded', function() {
                const today = new Date();
                const year = today.getFullYear();
                const month = String(today.getMonth() + 1).padStart(2, '0');
                const firstDay = `${year}-${month}-01`;
                const lastDay = new Date(year, today.getMonth() + 1, 0).toISOString().split('T')[0];
                
                document.getElementById('start').value = firstDay;
                document.getElementById('end').value = lastDay;
            });
        </script>
    </body>
</html>

